<template>
	<view class="bg prel">
		<view class="tagegg">
			<view class="badge2 flex flex_ac flex_jc">{{aotemaninfo.egg_count}}</view>
			<view class="egg"></view>
		</view>
		
		<view class="record_box">
			<view class="bg"></view>
			<navigator url="/pages/choujiang_list/index"  
				class="record flex flex_jc flex_ac fz25">抽奖记录
			</navigator>
		</view>
		
		<view class="gunping_box prel">
			<view class="bg"></view>
			<view class="gplibox">
				<view
					:class="isAnimate?'up-animation':''"
					v-for="(item,index) in zhongjiang_list" 
					class="gpli flex fz25 col_999 flex_ac">
					<view class="icon">
						<image mode="widthFix" :src="item.user.avatar"></image>
					</view>
					<view class="name ml10 hidden1">[{{item.user.nickname}}]</view>
					<view class="award ml10 hidden1">{{item.tongzhi}}</view>
					<view class="time ml10">{{item.zhongjiang_at}}</view>
				</view>
			</view>
			
		</view>
		
		<image mode="widthFix" :class="is_anim?'tremble':''" class="bgimg " :src="img_list.bg"></image>
		<view class="jiangpilist">
			<swiper 
				autoplay="false" interval="1000" circular="true"
			>
				<swiper-item class="prel" v-for="(item,index) in zhanshi_list">
					<image mode="widthFix" class="flex flex_jc img_color_30" src="../../static/zhuangyuan/gm_background_egg_001.png">
					</image>
					<view class="zhanshi flex flex_jc flex_ac flex_wrap">
						<view class="libox flex flex_wrap flex_jc">
							<view class="li" v-if="item.type==1" :class="item.class"></view>
							<view class="li" v-if="item.type==2">
								<image mode="widthFix" :src="item.src"></image>
							</view>
							<view class="name w100 fz25 txt_c" style="color: #fff;">{{item.name}}</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view :style="{ top: dantop+'px'}" class="dandanbox w100 flex flex_jc">
			<view class="prel flex flex_jc">
				<view class="tips flex flex_jc flex_ac fz25">{{tips}}</view>
				<image mode="widthFix" class="dandan" :src="img_list.dandan"></image>
				<image mode="widthFix" class="dandanwanju dandanwanjuxuanzhuan"
					src="../../static/zhuangyuan/gm_background_egg_001.png"></image>
				<image @click="zyChoujiang()" class="gamebtn"
					mode="widthFix" src="../../static/zhuangyuan/gm_anime_btn_001.png"></image>
				<image @click="zyChoujiang()" class="xuanzhuan"
					mode="widthFix" src="../../static/zhuangyuan/gm_anime_001.png"></image>
			</view>
		</view>
		<image mode="widthFix" class="chuansongdai" src="../../static/zhuangyuan/jiazi_008.png"></image>
		<image mode="widthFix" class="bottomimg" :src="img_list.jiazi"></image>
		<!-- 遮罩层 -->
		<view v-if="is_anim" class="zhezhao"></view>
		<!-- 弹出鸡蛋爆炸 -->
		<view v-if="is_anim" class="bg2 flex flex_ac flex_jc">
			<view class="bomb_mask"></view>
			<image mode="widthFix" class="texiaodandan"
				src="../../static/zhuangyuan/gm_background_egg_001.png"></image>
		</view>
		<!-- 弹出奖品 -->
		<view v-if="is_anim" class="bg3 flex flex_ac flex_jc">
			<view class="jiangping_box prel flex flex_jc flex_ac flex_wrap">
				<view 
					style="background-image: url('../../static/zhuangyuan/snow.png');background-size:200% 100%;"
				 class="snowbg"></view>
				<view class="jiangping_detail w100 flex flex_jc flex_wrap">
					 <view v-if="jiangping.type==1" :class="jiangping.class" class="jiangping_stuff"></view>
					 <view v-if="jiangping.type==2" class="jiangping_stuff flex flex_ac">
					 	<image mode="widthFix" :src="jiangping.src"></image>
					 </view>
					 <view class="jiangping_name w100 txt_c mt30" style="color: #fff;">{{jiangping.msg}}</view>
				</view>
				<view @click="queding()" class="queding w100 flex flex_ac flex_jc">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {playSound,getDateDiff } from "@/utils/common"
	import {niudaninit,zyChoujiang} from "@/api/api"
	export default {
		data() {
			return {
				zhongjiang_list:[],
				zhanshi_list : [],
				tips:'1枚凹特蛋/次，奖励如下！',
				danrealtop:360,
				dantop:0,
				windowWidth:0,
				windowHeight:0,
				bili:0,
				is_anim:false,
				aotemaninfo:[],
				choujiang_click:false,
				jiangping:[],
				isAnimate:false,
				img_list:[],
			}
		},
		
		onLoad: function (option) {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.windowHeight = res.windowHeight
					that.windowWidth = res.windowWidth
					that.bili = res.windowWidth/750;
					that.dantop = that.bili*that.danrealtop
					that.niudaninit()
				}
			})
		},
		
		onShow:function(){
			
			
		},
	
		methods:{
			
			startMessageTimer() {
			    //列表数据少于三条就不滚动了
			    if (this.timer || !this.zhongjiang_list.length || this.zhongjiang_list.length <= 3) {
			        return
			    }
			    //每隔3秒钟滚动一次
			    this.timer = setInterval(() => {
			        //1.开启动画之后，这个时候列表就向上滚动了
			        //2.在等待每次滚动时间差不多到的时候，把最前面的数据放到列表最后，这样就能循环滚动了
			        //3.最后再关闭动画，等待下次再开启动画，这样就形成了循环滚动的效果了 
			        this.isAnimate = true
			        setTimeout(() => {
			          //操作记录列表
			          let firstItem = this.zhongjiang_list.shift()
			          //添加到最后
			          this.zhongjiang_list.push(firstItem)
			          //关闭动画
			          this.isAnimate = false
			        }, 900)
			    }, 3000)
			},
			
			
			queding(){
				this.is_anim = false	
				this.choujiang_click = false
			},
			
			niudaninit(){
				var that = this
				niudaninit().then(res=>{
					if(res.code==0){
						that.zhongjiang_list = res.data.zhongjiang_list
						for(var i = 0 ;i<that.zhongjiang_list.length;i++){
							var tongzhi = ''
							if(that.zhongjiang_list[i].award=='nengliangshi'){
								tongzhi = '抽中了'+that.zhongjiang_list[i].count+'颗能量石'
							}else if(that.zhongjiang_list[i].award=='jineng'){
								tongzhi = '抽中了'+that.zhongjiang_list[i].count+'技能点'
							}else if(that.zhongjiang_list[i].award=='egg'){
								tongzhi = '抽中了凹特蛋'+that.zhongjiang_list[i].count+'枚'
							}else if(that.zhongjiang_list[i].award=='redpag'){
								tongzhi = '抽中了'+that.zhongjiang_list[i].count+'金币'
							}
							that.zhongjiang_list[i].tongzhi = tongzhi
							that.zhongjiang_list[i].zhongjiang_at = getDateDiff(that.zhongjiang_list[i].created_at)
						}
						that.zhanshi_list = res.data.zhanshi_list
						that.aotemaninfo = res.data.aotemaninfo
						that.img_list = res.data.img
						that.startMessageTimer()
					}else{
						that.msg(res.msg)
					}
				})
			},
			
			zyChoujiang(){
				var that = this
				if(!that.choujiang_click){
					that.choujiang_click = true
					if(that.aotemaninfo.egg_count<1){
						that.msg('凹特蛋个数不足')
						that.choujiang_click = false
						return
					}
					uni.showLoading({
						icon:'none',
						title: '启动中'
					});
					zyChoujiang().then(res=>{
						if(res.code==0){
							that.jiangping = res.data
							
							setTimeout(function () {
							  uni.hideLoading();
							  //启动动画
							  that.is_anim = true
							}, 200);
							setTimeout(function () {
							 if(res.data.class=='egg'){
								 that.aotemaninfo.egg_count = that.aotemaninfo.egg_count+res.data.count-1
							 }else{
								 that.aotemaninfo.egg_count = that.aotemaninfo.egg_count-1
							 }
							}, 3000);
							
						}else{
							uni.hideLoading();
							that.msg(res.msg)
						}
					})
				}
				
			},
			
			msg(msg){
				uni.showToast({
					title: msg,
					icon:'none'
				});
			},
		}
	}
</script>
<style>
	swiper{height: 195rpx!important;margin-left: -70rpx;}
	swiper-item{width: 180rpx!important;display: flex;;
		align-items: flex-end;justify-content: center;}
</style>
<style scoped>
	.record_box .record{width: 100%;height: 100%;position: absolute;top: 0;left: 0;color: #fff;}
	.record_box .bg{width: 100%;height: 100%;background-color: #000;
		opacity: .4;position: absolute;top: 0;left: 0}
	.record_box{position: absolute;bottom: 400rpx;left: 0;overflow: hidden;
		height: 40rpx;border-top-right-radius: 10rpx;z-index: 3;
		border-bottom-right-radius: 10rpx;width: 150rpx;}
	.libox .name{background-color: #4caf50;border-radius: 10rpx;}
	.up-animation { animation: upAni 1s ;}
	@keyframes upAni {
	  0% {
	    transform: translateY(0rpx);
	    -webkit-transform: translateY(0rpx);
	  }
	  100% {
	    transform: translateY(-60rpx);
	    -webkit-transform: translateY(-60rpx);
	  }
	}
	.gpli .time{max-width: 125rpx;}
	.gpli .award{max-width: 210rpx;}
	.gpli .name{max-width: 150rpx;}
	.gplibox{width: 100%;height: 100%;top: 0;left: 0;position: absolute;}
	.gpli .icon image{width: 50rpx;}
	.gpli{height: 70rpx;}
	.gunping_box .bg{width: 100%;height: 100%;background-color: #000;opacity: .4;top: 0;left: 0}
	.gunping_box{position: absolute;width: 550rpx;height: 130rpx;border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;overflow: hidden;}
	.tagegg{position: absolute;right: 30rpx;top: 30rpx;}
	.badge2{width: 40rpx;height: 40rpx;border-radius: 100%;background-color: red;
		position: absolute;color: #fff;font-size: 20rpx;top: -15rpx;right: -15rpx;}
	.queding{height: 80rpx;background-color: #4caf50;
		border-radius: 40rpx;color: #fff;font-size: 40rpx;font-weight: bold;}
	.jiangping_detail .egg{width: 160rpx!important;height: 200rpx!important}
	.jiangping_detail .nengliangshi{width:200rpx!important;height: 200rpx!important;}
	.jiangping_stuff image{width: 200rpx;}
	.jiangping_detail{width: 100%;}
	.img_color_30 { filter: grayscale(30%);}
	.libox{width: 120rpx;}
	.zhanshi .li image{width: 120rpx;}
	.zhanshi .li{height: 120rpx;}
	.zhanshi{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
	.egg{background-image: linear-gradient(135deg,#d7915b,white,#c75050);width: 96rpx;height: 120rpx;
		border-radius: 50%/55% 55% 45% 45%;}
	.nengliangshi{border-radius: 50%/55% 55% 75% 65%;background-image: linear-gradient(135deg,
		white,#d4896e,black);width: 120rpx;height: 120rpx;}
	
	.snowbg{position: absolute;top: 0;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		animation: snow 3s linear infinite;
		pointer-events: none; 
		/* //设置击穿，此盒子下面的任何点击划过等交互事件，可以正常显示 */
	}
	.bg3{position: absolute;width: 100vw;height: 100vh;top: 0;left: 0;z-index: 4;}
	.jiangping_box{width: 300rpx;height: 450rpx;z-index: 2;opacity: 0;
		animation: jiangpingdisplay 1s linear 3s forwards;}
	.texiaodandan{width: 200rpx;animation: bomb 3s both;}
	.bg2{position: absolute;width: 100vw;height: 100vh;top: 0;left: 0;z-index: 4;}
	.zhezhao{width: 100vh;height: 100vh;opacity: .2;background-color: black;z-index: 3;}
	.xuanzhuan{position: absolute;top: 453rpx;width: 150rpx;
		z-index: 2;margin-left: 35rpx;animation: rotate-anime 3s linear infinite;}
	.gamebtn{position: absolute;top: 453rpx;width: 84rpx;z-index: 2;margin-left: 35rpx;}
	.tips{position: absolute;top: -205rpx;left: 34rpx;width: 300rpx;
		height: 70rpx;font-weight:bold;}
	
	@keyframes wanjudan{
			0%{transform: rotateY(0deg)}
			15%{transform: rotateY(1800deg)}
			30%{transform: rotateY(0deg)}
			100%{transform: rotateY(0deg)}
	}
	@keyframes rotate-anime{0%{transform:rotate(0)}to{transform:rotate(1turn)}}
	.choujiang{animation: choujiang 3s linear forwards;}
	.dandanwanjuxuanzhuan{animation: wanjudan 3s linear infinite;}
	.dandanwanju{position: absolute;z-index: 2;width: 100rpx;left: 0;top: -19rpx;}
	.dandanbox{position: absolute;top: 0;left: 0;z-index: 2;}
	.dandan{width: 450rpx;}
	.jiangpilist image{width: 170rpx;}
	.jiangpilist{width: 100%;position: absolute;bottom: 35rpx;z-index: 2;}
	.chuansongdai{width: 100%;position: absolute;bottom: 0;left: 0;z-index: 2;pointer-events: none; }
	.bottomimg{width: 100%;position: absolute;bottom: 0;left: 0;z-index: 1;}
	.bg .bgimg{width: 100%;z-index: 3;}
	.bg{width: 100vw;height: 100vh;overflow: hidden;}
	@keyframes jiangpingdisplay {
	
		100% {
			opacity: 1;
		}
		
	}
	
	@keyframes bomb {
		0% {
			transform: scale(0, 0);
		}
		60% {
			transform: scale(1, 1) rotate(-3deg);
			opacity: 1;
		}
		70%,73% {
			transform: scale(0.9) rotate(3deg);
		}
		77%,83%,90%,97% {
			transform: scale(1.1) rotate(-3deg);
		}
		80%,87%,93% {
			transform: scale(1.3) rotate(3deg);
			opacity: 1;
		}
		100% {
			transform: scale(10) rotate(0);
			opacity: 0;
			display: none;
		}
	}
	//震动
	.tremble {
		animation: trembleAni 1s linear 3s;
	}
	
	@keyframes trembleAni {
		0% {
			transform: rotate(0);
		}
		10%,30%,50%,70%,90% {
			transform: rotate(1deg);
		}
		20%,40%,60%,80% {
			transform: rotate(-1deg);
		}
		100% {
			transform: rotate(0);
		}
	}
		/* 页面白屏 */
	.bomb_mask {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2;
		animation: maskChange 1s linear 3s;
	}
	@keyframes maskChange {
		0% {
			background-color: rgba(0, 0, 0, 0.7);
		}
		30% {
			background-color: rgba(255, 255, 255, 0.85);
		}
		100% {
			background-color: rgba(0, 0, 0, 0.7);
		}
	}
	
	@keyframes snow {
		0% {
			background-position: 0px 0px;
		}
		100% {
			background-position: 100px 1000px;
		}
	}

	
</style>